<template>
  <div class="pagination">
    <button 
      class="pagination-btn pagination-prev" 
      :disabled="currentPage <= 1"
      @click="handlePrev"
    >
      <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M10.6666 3.33337L6.00001 8.00004L10.6666 12.6667" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
      </svg>
    </button>
    
    <div class="pagination-pages">
      <!-- 第一页 -->
      <button 
        v-if="showFirstPage" 
        class="pagination-btn pagination-page" 
        :class="{ 'active': currentPage === 1 }"
        @click="handleChangePage(1)"
      >
        1
      </button>
      
      <!-- 省略号 -->
      <span v-if="showLeftEllipsis" class="pagination-ellipsis">...</span>
      
      <!-- 中间页码 -->
      <button 
        v-for="page in pages" 
        :key="page" 
        class="pagination-btn pagination-page" 
        :class="{ 'active': currentPage === page }"
        @click="handleChangePage(page)"
      >
        {{ page }}
      </button>
      
      <!-- 省略号 -->
      <span v-if="showRightEllipsis" class="pagination-ellipsis">...</span>
      
      <!-- 最后一页 -->
      <button 
        v-if="showLastPage" 
        class="pagination-btn pagination-page" 
        :class="{ 'active': currentPage === totalPages }"
        @click="handleChangePage(totalPages)"
      >
        {{ totalPages }}
      </button>
    </div>
    
    <button 
      class="pagination-btn pagination-next" 
      :disabled="currentPage >= totalPages"
      @click="handleNext"
    >
      <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M5.33337 12.6667L10 8.00004L5.33337 3.33337" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
      </svg>
    </button>
    
    <div class="pagination-info" v-if="showTotal">
      共 {{ total }} 条
    </div>
    
    <div class="pagination-jumper" v-if="showJumper">
      <span class="jumper-label">跳至</span>
      <input 
        class="jumper-input" 
        type="number" 
        :min="1" 
        :max="totalPages" 
        v-model="jumpPage"
        @keyup.enter="handleJump"
      >
      <span class="jumper-label">页</span>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Pagination',
  props: {
    total: {
      type: Number,
      required: true
    },
    pageSize: {
      type: Number,
      default: 10
    },
    currentPage: {
      type: Number,
      default: 1
    },
    pagerCount: {
      type: Number,
      default: 5
    },
    showTotal: {
      type: Boolean,
      default: true
    },
    showJumper: {
      type: Boolean,
      default: true
    }
  },
  emits: ['update:currentPage', 'change'],
  data() {
    return {
      jumpPage: this.currentPage
    }
  },
  computed: {
    totalPages() {
      return Math.ceil(this.total / this.pageSize) || 1
    },
    pages() {
      const pagerCount = this.pagerCount
      const halfPagerCount = Math.floor(pagerCount / 2)
      const currentPage = this.currentPage
      const totalPages = this.totalPages
      
      let startPage = 1
      let endPage = totalPages
      
      if (totalPages > pagerCount) {
        if (currentPage > halfPagerCount) {
          startPage = currentPage - halfPagerCount
        }
        
        if (currentPage + halfPagerCount > totalPages) {
          startPage = totalPages - pagerCount + 1
        }
        
        startPage = Math.max(1, startPage)
        endPage = Math.min(startPage + pagerCount - 1, totalPages)
      }
      
      const result = []
      for (let i = startPage; i <= endPage; i++) {
        result.push(i)
      }
      
      return result
    },
    showFirstPage() {
      return this.pages.length > 0 && this.pages[0] > 1
    },
    showLastPage() {
      return this.pages.length > 0 && this.pages[this.pages.length - 1] < this.totalPages
    },
    showLeftEllipsis() {
      return this.showFirstPage && this.pages[0] > 2
    },
    showRightEllipsis() {
      return this.showLastPage && this.pages[this.pages.length - 1] < this.totalPages - 1
    }
  },
  watch: {
    currentPage(val) {
      this.jumpPage = val
    }
  },
  methods: {
    handleChangePage(page) {
      if (page !== this.currentPage) {
        this.$emit('update:currentPage', page)
        this.$emit('change', page)
      }
    },
    handlePrev() {
      if (this.currentPage > 1) {
        this.handleChangePage(this.currentPage - 1)
      }
    },
    handleNext() {
      if (this.currentPage < this.totalPages) {
        this.handleChangePage(this.currentPage + 1)
      }
    },
    handleJump() {
      let page = parseInt(this.jumpPage)
      
      if (isNaN(page)) {
        page = this.currentPage
        this.jumpPage = page
        return
      }
      
      if (page < 1) {
        page = 1
      } else if (page > this.totalPages) {
        page = this.totalPages
      }
      
      this.jumpPage = page
      this.handleChangePage(page)
    }
  }
}
</script>

<style scoped>
.pagination {
  display: flex;
  align-items: center;
  font-size: 14px;
}

.pagination-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 32px;
  padding: 0 8px;
  margin: 0 4px;
  border-radius: 4px;
  border: 1px solid #d9d9d9;
  background-color: white;
  color: #595959;
  cursor: pointer;
  transition: all 0.3s;
}

.pagination-btn:hover:not(:disabled):not(.active) {
  color: #1890ff;
  border-color: #1890ff;
}

.pagination-btn:disabled {
  color: #d9d9d9;
  cursor: not-allowed;
}

.pagination-btn.active {
  color: white;
  background-color: #1890ff;
  border-color: #1890ff;
}

.pagination-pages {
  display: flex;
  align-items: center;
}

.pagination-ellipsis {
  display: inline-block;
  margin: 0 4px;
  color: #8c8c8c;
}

.pagination-info {
  margin-left: 16px;
  color: #8c8c8c;
}

.pagination-jumper {
  display: flex;
  align-items: center;
  margin-left: 16px;
}

.jumper-label {
  color: #8c8c8c;
}

.jumper-input {
  width: 48px;
  height: 32px;
  margin: 0 8px;
  padding: 0 8px;
  border-radius: 4px;
  border: 1px solid #d9d9d9;
  text-align: center;
}

.jumper-input:focus {
  border-color: #1890ff;
  outline: none;
  box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
}
</style> 